<template>
  <div class="condition">
    <el-row class="bgColor">
      <el-col :xs="24" :sm="24" :lg="24" class="choose-flex">
        <label class="label">项目:</label>
        <el-select 
          @change="projectChange" 
          clearable 
          v-model="selectedProject" 
          filterable 
          placeholder="请选择项目">
          <el-option
            v-for="item in projectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  import http from '@/views/sys/axios'

  export default {
    name: 'Condition',
    data() {
      return {
        projectOptions: [],
        selectedProject: ''
      }
    },
    computed: {
      ...mapState({
        condition: state => state.conditions.condition
      })
    },
    methods: {
      ...mapMutations('conditions', [
        'setCondition'
      ]),
      projectChange(val) {
        this.setCondition({
          projectId: val
        })
      },
      init() {
        const resq = http.get(`/api/account/personal_group_dept`)
        return resq
      },
      async initResult() {
        try {
          const { code, project_info } = await this.init()
          if(code === 200) {
            this.projectOptions = project_info
            if(this.projectOptions.length) {            
              if(!this.condition.projectId) {
                this.selectedProject = this.projectOptions[0].value
                this.setCondition({
                  projectId: this.projectOptions[0].value
                })
              } else {
                this.selectedProject = this.condition.projectId
              }              
            }
          }
        } catch(err) {
          console.log(err)
        }
        
      }
    },
    created() {
      this.initResult()
    }
  }
</script>

<style lang="scss" scoped>
  .condition{
    .bgColor{
      background: #ffffff;
      padding: 20px;
      .choose-flex{
        display: flex;
        .label{
          margin: auto 0;
          margin-right: 10px;
        }
      }
    }
  }
</style>